<template>
  <div>
    <h1>小老妹</h1>

    <div>
      <!-- <router-link to="/home/music/1/5min">华语音乐</router-link>
      <router-link to="/home/music/2/6min">粤语音乐</router-link>
      <router-link to="/home/music/3/7min">英语音乐</router-link> -->
      <!-- 
  to对象的写法注意事项:
          - to的对象写法中,如果和params一起使用,
              则不能书写path,只能使用name
          - 可选的params参数,要么不写,
              要么写一个undefined做为值,不能书写一个空字符串
   -->

      <!--  path:'/home/music/1',   此写法不能用在对象中,需要写name-->
      <router-link
        :to="{
          name: 'Music',
          params: {
            id: '1',
            time: 'undefined',
          },
        }"
        >华语音乐</router-link
      >
      <router-link
        :to="{
          name: 'Music',
          params: {
            id: '2',
            time: 'undefined',
          },
        }"
        >粤语音乐</router-link
      >
      <router-link
        :to="{
          name: 'Music',
          params: {
            id: '3',
            time: 'undefined',
          },
        }"
        >英语音乐</router-link
      >

      <!-- 引入query的传参方式 -->
      <router-link to="/home/gams/?tit=侠盗飞车&banben=2022">游戏</router-link>
      <!-- 这个时候在$route上有一个query对象,里面保存的就是我们的数据 tit he banben -->



      <!-- query传参 -->
      <router-link
        :to="{
          name: 'gams',
          query: {
            tit: 'qq飞车',
            banben: '2333',
          },
        }"
        >游戏2</router-link
      >
    </div>

    <!-- 组件占位符千万不能忘,否则无法显示内容 -->
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style>
</style>